<template>
  <div class="right-container">
    <h3>Right 组件</h3>

    <p>总价： {{ totalPrice }}</p>
    <p>购物车： {{ cartList }}</p>

    <button @click="fn1">调用fn1 --user</button>
    <button @click="cFn1">调用fn1 --cart</button>
    <hr />
  </div>
</template>

<script>
// map辅助函数来简化访问
import { mapGetters, mapState, mapMutations } from 'vuex'
export default {
  name: 'Right',
  computed: {
    // 永远是找根
    ...mapState('cart', ['cartList']),
    // 辅助函数这么写，是找根里面的
    // ...mapGetters(['totalPrice'])
    // 而我现在要简化的是子模块里的getters
    ...mapGetters('cart', ['totalPrice'])
  },
  methods: {
    ...mapMutations('user', ['fn1']),
    // ...mapMutations('cart', ['fn1']),

    // 把cart里模块里的fn1，改名为cFn1
    ...mapMutations('cart', { cFn1: 'fn1' })
  }
}
</script>

<style></style>
